<template>
  <div class="app-container pagebox" @click="CloseSystemType">
    <a-row :gutter="16">
      <a-col class="gutter-row" :span="12">
        <div class="gutter-boxinfo bg">
          <div class="infotitle">
            <!-- <span class="infotitlespan">设备详情</span> -->
            <span :style="{ color: dataInfo.color }" v-if="dataInfo.color">
              <a-icon theme="filled" :style="{ color: dataInfo.color, 'margin-right': ' 2px' }" type="check-circle" />
              {{ dataInfo.runstate | runStateOptionType }}
            </span>
            <span class="colorin">{{ dataInfo.groupname }}</span>
            <a-button
              type="primary"
              :disabled="hasAuth('registerBtn')"
              @func="getData"
              @click="() => registration(true)"
            >
              注册续期
            </a-button>
          </div>
          <div class="infoimgbox">
            <div style="" class="infoimg">
              <img :src="dataInfo.picture ? imgurl + dataInfo.picture : defultimg" alt="" :onerror="onerrorimg" />
            </div>
            <div class="infoAlarmbox">
              <h4 class="colorin">当前报警</h4>
              <div v-if="dataInfo.runstate == 2000">
                <a-table
                  :columns="columns"
                  :data-source="ararmData"
                  size="small"
                  :scroll="{ y: 300 }"
                  :pagination="false"
                ></a-table>
              </div>

              <a-empty v-else style="margin-top: 80px" />
            </div>
          </div>
        </div>
      </a-col>
      <!--    时序图-->
      <a-col class="gutter-row" :span="12">
        <div class="gutter-boxinfo bg">
          <a-spin :spinning="spinning">
            <div class="infotitle">
              <span class="infotitlespan colorin">设备基本数据</span>
              <div style="float: right">
                <a-date-picker size="small" :default-value="moment(timeParams.day, dateFormat)" @change="datechange" />
              </div>
            </div>
            <div>
              <div>
                <!--              环形图-->
                <div style="width: 40%; float: left">
                  <pieCharts :chartData="pieDataCharts" :running="running" :height="'370px'" />
                </div>
                <!--              环形图图例-->
                <div style="width: 30%; float: left; height: 370px" class="pielegsendbox">
                  <p class="pielegsend" v-for="(item, index) in pieData" :key="index + 'a'">
                    <span class="quan" :style="{ 'border-color': alarmStatues[index] }"></span>
                    <span class="name">{{ item.name }}</span>
                    <span class="value">{{ item.value }}</span>
                  </p>
                </div>
                <ul style="width: 30%; float: left; height: 370px" class="pielegsendbox">
                  <li class="pielegsend">
                    <span class="name">累计加工</span>
                    <span class="value">{{ timeObj ? (timeObj.total ? timeObj.total : 0) : 0 }}件</span>
                  </li>
                  <li class="pielegsend">
                    <p class="name">工件信息</p>
                    <p>
                      <span class="value" v-for="(item, index) in produceNameRank" :key="index + 'b'">
                        {{ index + 1 }}. {{ item.produceName }} {{ item.count }}件
                      </span>
                      <!-- <a @click="gotoyieldDetails" style="color:#269AF3">查看详情></a> -->
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </a-spin>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="24" style="margin-top: 20px">
        <div class="gutter-boxinfo bg">
          <a-row>
            <a-col :span="12">
              <div class="infotitle">
                <span class="infotitlespan colorin">
                  机床信息
                  <a-icon type="edit" style="color: #0eaee0; margin-left: 10px" @click="editMSG" v-if="!msgEdit" />
                  <a-icon
                    type="check"
                    style="color: #0eaee0; margin-left: 10px"
                    @click="updateArchiveAndGuide"
                    v-else
                  />
                </span>
              </div>
              <div>
                <ul class="pielegsendbox pielegsendboxbottom">
                  <li class="pielegsend">
                    <p class="name">设备规格</p>
                    <p>
                      <span v-if="!msgEdit">{{ dataGuide.macNorm || '' }}</span>
                      <a-input v-else placeholder="设备规格" v-model="dataGuide.macNorm" />
                    </p>
                  </li>
                  <li class="pielegsend flex">
                    <div class="flex">
                      <p class="name">上网设备IMEI</p>
                      <p>
                        <span v-if="!msgEdit">{{ dataGuide.macImei || '' }}</span>
                        <a-input v-else placeholder="上网设备IMEI" v-model="dataGuide.macImei" />
                      </p>
                    </div>
                    <div class=" setBox flex">
                      <p class="name">iccid</p>
                      <p>
                        <span v-if="!msgEdit">{{ dataGuide.cid || '暂无数据' }}</span>
                        <a-input v-else placeholder="iccid " v-model="dataGuide.cid" />
                      </p>
                    </div>
                  </li>
                  <li class="pielegsend flex">
                    <div class="flex">
                      <p class="name">联网方式</p>
                      <p class="value" v-if="!msgEdit">
                        {{ dataGuide.netWorkingMode || '' }}
                      </p>
                      <a-select
                      :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                        v-else
                        :default-value="dataGuide.netWorkingMode"
                        style="width: 200px"
                        v-model="dataGuide.netWorkingMode"
                      >
                        <a-select-option :value="item" v-for="(item, index) in netTypeArray" :key="item">
                          {{ item }}
                        </a-select-option>
                      </a-select>
                    </div>
                    <div class="setBox flex">
                      <p class="name">地理位置</p>
                      <p>
                        <span v-if="!msgEdit">{{ dataGuide.location }}</span>
                        <a-input v-else placeholder="地理位置" v-model="dataGuide.location" />
                      </p>
                    </div>
                  </li>
                  <li class="pielegsend flex">
                    <div class="flex">
                      <p class="name">设备编号</p>
                      <p>
                        <span v-if="!msgEdit">{{ dataGuide.macNumb || '' }}</span>
                        <a-input v-else placeholder="设备编号" v-model="dataGuide.macNumb" />
                      </p>
                    </div>
                    <!-- <div class=" setBox flex">
                      <p class="name">当前流量</p>
                      <p>
                        <span v-if="!msgEdit">{{ cidData.resultDesc }}</span>
                      </p>
                    </div> -->
                  </li>
                  <li class="pielegsend flex">
                    <div class="flex">
                      <p class="name">设备型号</p>
                      <p>
                        <span v-if="!msgEdit">{{ dataGuide.macType || '' }}</span>
                        <a-input v-else placeholder="设备型号" v-model="dataGuide.macType" />
                      </p>
                    </div>
                    <!-- <div class="setBox">
                      <a-button>流量充值</a-button>
                    </div> -->
                  </li>
                  <li class="pielegsend">
                    <p class="name">设备类型</p>
                    <p>
                      <span v-if="!msgEdit">{{ dataGuide.macName || '' }}</span>
                      <a-select
                      :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                        v-if="msgEdit"
                        :default-value="macName[0]"
                        @change="handleChangemacNameone"
                        style="width: 100px"
                      >
                        <a-select-option :value="item" v-for="(item, index) in equipmentTypelist" :key="item">
                          {{ item }}
                        </a-select-option>
                      </a-select>
                      <a-select
                      :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                        v-if="msgEdit"
                        v-model="macName[1]"
                        :default-value="macName[1]"
                        @change="handleChangemacNametwo"
                        style="width: 100px"
                      >
                        <a-select-option :value="item" v-for="(item, index) in equipmentType[macNameIndex]" :key="item">
                          {{ item }}
                        </a-select-option>
                      </a-select>
                    </p>
                  </li>
                  <li class="pielegsend">
                    <p class="name">刀库类型</p>
                    <p>
                      <span v-if="!msgEdit">{{ dataGuide.toolChargeType || '' }}</span>
                      <a-select
                        v-if="msgEdit"
                        v-model="dataGuide.toolChargeType"
                        :default-value="dataGuide.netWorkingMode"
                        @change="handletoolChange"
                        style="width: 200px"
                      >
                        <a-select-option :value="item" v-for="(item, index) in array" :key="item">
                          {{ item }}
                        </a-select-option>
                      </a-select>
                    </p>
                  </li>
                  <li class="pielegsend">
                    <p class="name">导轨类型</p>
                    <template v-if="!msgEdit">
                      <p>
                        <a
                          v-for="(toolGuide, index) in dataGuide.toolGuide"
                          :key="index + 'c'"
                          style="display: block"
                          href=""
                        >
                          <span style="display: inline-block; margin-right: 20px" class="colorin">
                            {{ toolGuide.guideAxis || '' }}
                          </span>
                          <span style="display: inline-block" class="colorin">{{ toolGuide.guideType || '' }}</span>
                        </a>
                      </p>
                    </template>

                    <template v-if="msgEdit">
                      <div style="color: #0eaee0; margin: 10px 0" @click="addtoolGuide">
                        <a-icon type="plus-circle" style="color: #0eaee0" />
                        添加导轨
                      </div>
                      <div style="margin-bottom: 10px; margin-left: 85px">
                        <div
                          v-for="(toolGuide, index) in dataGuide.toolGuide"
                          :key="index + 'v'"
                          style="position: relative; margin-bottom: 10px"
                        >
                          <a-icon
                            type="close-circle"
                            style="position: absolute; top: 7px; left: 250px; color: red"
                            @click="deteletoolGuide(index)"
                          />
                          <a-input placeholder="设备编号" v-model="toolGuide.guideAxis" style="width: 100px" />
                          <a-radio-group v-model="toolGuide.guideType" style="margin-left: 10px">
                            <a-radio :value="'线轨'" class="colorin">线轨</a-radio>
                            <a-radio :value="'硬轨'" class="colorin">硬轨</a-radio>
                          </a-radio-group>
                        </div>
                      </div>
                    </template>
                  </li>
                  <li class="pielegsend">
                    <p class="name">机床图片</p>
                    <div style="overflow: hidden; margin-top: 10px">
                      <div
                        style="width: 80px; float: left; margin-right: 20px"
                        v-for="item in picturelist"
                        :key="item.name"
                      >
                        <imageupload
                          v-if="msgEdit"
                          :imagUrl="item.img ? imgurl + item.img : ''"
                          v-model="item.fileObj"
                          :type="2"
                          :width="'50px'"
                        />
                        <img
                          @click="openimg(item.img)"
                          v-else
                          :src="imgurl + item.img"
                          :onerror="onerrorpicture"
                          alt=""
                          style="width: 80px; height: 80px"
                        />
                        <p style="text-align: center; width: 100%">
                          {{ item.name }}
                        </p>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="infotitle bg">
                <span class="infotitlespan colorin">
                  数控系统信息
                  <a-icon
                    type="edit"
                    style="color: #0eaee0; margin-left: 10px"
                    @click="editCncDevice"
                    v-if="!editCncDeviceedit"
                  />
                  <a-icon
                    type="check"
                    style="color: #0eaee0; margin-left: 10px"
                    @click="updateArchivesCncDevice"
                    v-else
                  />
                </span>
              </div>
              <div>
                <ul class="pielegsendbox pielegsendboxbottom" @click="CloseSystemType">
                  <li class="pielegsend">
                    <p class="name">系统型号</p>
                    <p>
                      <span v-if="!editCncDeviceedit">{{ ArchivesCncDevice.systemType || '' }}</span>

                      <a-input
                        v-else
                        placeholder="系统型号"
                        @click.stop="openSystemType"
                        v-model="ArchivesCncDevice.systemType"
                      />
                    </p>
                    <div class="myselectbox" v-show="systemTypeShow">
                      <div class="myselect">
                        <p v-for="(type, index) in systemTypes" :key="index" @click.stop="getSystemType(type)">
                          {{ type }}
                        </p>
                      </div>
                    </div>
                  </li>
                  <li class="pielegsend">
                    <p class="name">系统编号</p>
                    <p class="value">
                      <span v-if="!editCncDeviceedit">
                        {{ ArchivesCncDevice.cncNumber || '' }}
                      </span>
                      <a-input v-else placeholder="系统编号" v-model="ArchivesCncDevice.cncNumber" />
                    </p>
                  </li>
                  <li class="pielegsend">
                    <p class="name">SN号</p>
                    <p>
                      <span>{{ macSN || '' }}</span>
                      <!-- <a-input
                        v-else
                        placeholder="SN号"
                        v-model="ArchivesCncDevice.macSN"
                      /> -->
                    </p>
                  </li>
                  <li class="pielegsend">
                    <p class="name">软件版本</p>
                    <p>
                      <span v-if="!editCncDeviceedit">
                        {{ ArchivesCncDevice.softwareVersion || '' }}
                      </span>
                      <a-input v-else placeholder="软件版本" v-model="ArchivesCncDevice.softwareVersion" />
                    </p>
                  </li>
                  <li class="pielegsend">
                    <p class="name">NCU</p>
                    <p>
                      <span v-if="!editCncDeviceedit">
                        {{ ArchivesCncDevice.ncu || '' }}
                      </span>
                      <a-input v-else placeholder="NCU" v-model="ArchivesCncDevice.ncu" />
                    </p>
                  </li>
                  <li class="pielegsend">
                    <p class="name">LAD</p>
                    <p>
                      <span v-if="!editCncDeviceedit">{{ ArchivesCncDevice.lad || '' }}</span>
                      <a-input v-else placeholder="LAD" v-model="ArchivesCncDevice.lad" />
                    </p>
                  </li>
                  <li class="pielegsend">
                    <p class="name">DRV</p>
                    <p>
                      <span v-if="!editCncDeviceedit">{{ ArchivesCncDevice.drv || '' }}</span>
                      <a-input v-else placeholder="DRV" v-model="ArchivesCncDevice.drv" />
                    </p>
                  </li>
                  <li class="pielegsend">
                    <p class="name">OS</p>
                    <p>
                      <span v-if="!editCncDeviceedit">{{ ArchivesCncDevice.os || '' }}</span>
                      <a-input v-else placeholder="OS" v-model="ArchivesCncDevice.os" />
                    </p>
                  </li>
                  <li class="pielegsend">
                    <p class="name">API</p>
                    <p>
                      <span v-if="!editCncDeviceedit">{{ ArchivesCncDevice.api || '' }}</span>
                      <a-input v-else placeholder="API" v-model="ArchivesCncDevice.api" />
                    </p>
                  </li>
                </ul>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="infotitle">
                <span class="infotitlespan colorin">
                  伺服与电机信息
                  <a-icon
                    type="edit"
                    style="color: #0eaee0; margin-left: 10px"
                    @click="editServoMotor"
                    v-if="!ServoMotoredit"
                  />
                  <a-icon
                    type="check"
                    style="color: #0eaee0; margin-left: 10px"
                    @click="updateArchiveServoMotor"
                    v-else
                  />
                </span>
              </div>
              <div>
                <ul
                  class="pielegsendbox pielegsendboxbottom"
                  v-for="(item, index) in ArchiveServoMotor"
                  :key="index + 'l'"
                >
                  <li class="pielegsend">
                    <p class="value">
                      <span v-if="!ServoMotoredit">{{ item.axisType || '' }}</span>
                      <a-input style="width: 50px" v-else v-model="item.axisType" />
                    </p>
                    <p
                      class="name"
                      style="margin-left: 20px; color: red"
                      v-if="ServoMotoredit"
                      @click="deteleServoMotor(index)"
                    >
                      <a style="color: red">
                        <a-icon type="close-circle" style="margin-right: 10px" />
                        删除轴
                      </a>
                    </p>
                  </li>
                  <li class="pielegsend">
                    <p class="name">伺服驱动编号</p>
                    <p class="value">
                      <span v-if="!ServoMotoredit">{{ item.servoNumber || '' }}</span>
                      <a-input v-else placeholder="伺服驱动编号" v-model="item.servoNumber" />
                    </p>
                  </li>
                  <li class="pielegsend">
                    <p class="name">伺服驱动型号</p>
                    <p>
                      <span v-if="!ServoMotoredit">{{ item.servoType || '' }}</span>
                      <a-input v-else placeholder="伺服驱动型号" v-model="item.servoType" />
                    </p>
                  </li>
                  <li class="pielegsend">
                    <p class="name">伺服驱动版本</p>
                    <p>
                      <span v-if="!ServoMotoredit">{{ item.servoVersion || '' }}</span>
                      <a-input v-else placeholder="伺服驱动版本" v-model="item.servoVersion" />
                    </p>
                  </li>
                  <li class="pielegsend">
                    <p class="name">电机编号</p>
                    <p>
                      <span v-if="!ServoMotoredit">{{ item.motorNumber || '' }}</span>
                      <a-input v-else placeholder="电机编号" v-model="item.motorNumber" />
                    </p>
                  </li>
                  <li class="pielegsend">
                    <p class="name">电机型号</p>
                    <p>
                      <span v-if="!ServoMotoredit">{{ item.motorType || '' }}</span>
                      <a-input v-else placeholder="电机型号" v-model="item.motorType" />
                    </p>
                  </li>
                </ul>
                <div style="color: #0eaee0; margin: 10px 0" @click="addServoMotor" v-if="ServoMotoredit">
                  <a-icon type="plus-circle" style="color: #0eaee0" />
                  添加轴
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>

    <a-modal :visible="previewVisibleopen" :footer="null" @cancel="previewVisibleopen = false">
      <img alt="example" style="width: 100%" :src="previewimg" />
    </a-modal>

    <register :openDialog.sync="modal1Visible" :params="params"></register>
    <!-- <a-modal
      width="35%"
      title="生成注册码"
      :dialog-style="{ top: '20px' }"
      :visible="modal1Visible"
      :maskClosable="false"
      :keyboard="false"
      :footer="null"
      @cancel="() => closeRegistration(false)"
    >
      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="SN码">
          <span>{{ macSN || '' }}</span>
        </a-form-model-item>

        <a-form-model-item label="注册时间">
          <a-radio-group v-model="form.forever" @change="foreverChange">
            <a-radio :value="1">
              <span>永久</span>
            </a-radio>
            <a-radio :value="0">
              <span>自定义</span>
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="清除下级数据">
          <a-radio-group v-model="value" @change="onChange">
            <a-radio :value="1">
              <span>是</span>
            </a-radio>
            <a-radio :value="0">
              <span>否</span>
            </a-radio>
          </a-radio-group>
        </a-form-model-item> -->

    <!-- <a-form-model-item label="注册时间" v-if="form.forever == 0">
          <a-select  :getPopupContainer="(triggerNode) => triggerNode.parentNode" v-model="form.type" placeholder="请选择注册天数" style="width: 40%;" @change="DaysChange">
            <a-select-option value="1">
              一天
            </a-select-option>
            <a-select-option value="2">
              一周
            </a-select-option>
            <a-select-option value="3">
              一月
            </a-select-option>
            <a-select-option value="4">
              一年
            </a-select-option>
            <a-select-option value="0">
              自定义
            </a-select-option>
          </a-select>
          <span style="margin-left: 16px;">{{registerTime}}</span>
        </a-form-model-item> -->
    <!-- <a-form-model-item label="到期时间" v-if="(value == 0) & (form.forever == 0)">
          <a-date-picker size="small" @change="datechange" :disabledDate="disabledDate" />
          <div>
            {{times.year}} 年  {{times.month}} 月 {{times.day}}  日    12:00时
          </div>
        </a-form-model-item>

        <a-form-model-item label="注册码" v-if="RegistCode != ''">
          <span>{{ RegistCode || '' }}</span>
        </a-form-model-item> -->
    <!-- 
        <a-form-model-item :wrapper-col="{ span: 14, offset: 10 }">
          <a-button type="primary" @click="getRegistCode">
            获取注册码
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal> -->
  </div>
</template>
<script>
import register from './component/register.vue';
import Moment from 'moment';
import pieCharts from './component/pieCharts';
import api from '@/api/deviceInfo.js';
import API from '@/api/userConfig';
import imageupload from '@components/upload/imageupload.vue';
import { timeCalculation } from '@/unit/tool';
import { createNamespacedHelpers } from 'vuex';
import { formatDate } from '@/unit/formatDate';
import Register from './component/register.vue';
const { mapState } = createNamespacedHelpers('menu/');

const columns = [
  {
    title: '报警号',
    dataIndex: 'alarmid',
    scopedSlots: { customRender: 'alarmid' },
  },
  {
    title: '报警时间',
    dataIndex: 'uploadtime',
  },
  {
    title: '报警内容',
    dataIndex: 'alarmdata',
  },
];

let alarmStatues = ['#289EF6', '#3FC529', '#FBC225', '#E74629', '#E2E7EE'];
let systemTypes = ['HNC-808A', 'HNC-818A', 'HNC-818B', 'HNC-808D', 'HNC-818D', '宝鸡B60T', '宝鸡B80T', '宝鸡B80M'];

const runStateOption = [
  {
    label: '加工',
    value: 1000,
    color: '#46C13E',
  },
  {
    label: '报警',
    value: 2000,
    color: '#F80B18',
  },
  {
    label: '待机',
    value: 3000,
    color: '#FCCD0F',
  },
  {
    label: '离线',
    value: 4000,
    color: '#B9C6BA',
  },
];
const equipmentTypelist = [
  '数控车床',
  '数控铣床',
  '加工中心',
  '五轴机床',
  '专用机床',
  '数控磨床',
  '数控镗床',
  '数控钻床',
  '普通机床',
  '机器人',
  '其他机床',
];
const equipmentType = [
  ['平身车床', '斜身车床', '立式车床', '其他车床'],
  ['标准铣床', '卧式铣床', '龙门铣床'],
  ['卧式加工中心', '立式加工中心', '龙门加工中心', '其他加工中心'],
  ['摇篮式五轴', '摆头式五轴', '混合式五轴'],
  ['专用平床身车床', '专用斜床身车床', '专用铣床', '专用卧式加工中心', '专用立式加工中心', '其他专用机床'],
  ['数控平面磨床', '数控内圆磨床', '数控外圆磨床', '其他磨床'],
  ['数控镗床'],
  ['数控钻床'],
  ['普通机床', '普通铣床'],
  ['四轴机器人', '五轴机器人', '六轴机器人'],
  ['其他机床'],
];
const list = [
  { name: '正面', value: 'positive' },
  { name: '侧面', value: 'side' },
  { name: '刀库', value: 'knife' },
  { name: '电柜', value: 'electric' },
  { name: '导轨', value: 'guide' },
];

export default {
  name: 'index',
  filters: {
    runStateOptionType(val) {
      let opt = runStateOption.find((item) => item.value == val);
      return opt ? opt.label : '';
    },
  },
  components: {
    pieCharts,
    imageupload,
    register,
  },
  data() {
    let moment = this.$Moment;
    return {
      aa: true,
      modal1Visible: false,
      RegistCode: '',
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        type: undefined,
        forever: 0,
      },
      value: 0,
      clrFlag: '',
      times: {
        year: '--',
        month: '--',
        day: '--',
      },

      columns: columns,
      ararmData: [],
      alarmStatues: alarmStatues,
      pieData: [
        { value: '0', name: '开机' },
        { value: '0', name: '运行' },
        { value: '0', name: '待机' },
        {
          value: '0',
          name: '报警',
        },
        { value: '0', name: '离线' },
      ],
      macSN: '',
      userid: '',
      dataInfo: {},
      dataGuide: {},
      timeParams: {
        macSN: '',
        day: '',
      },
      moment,
      dateFormat: 'YYYY-MM-DD',
      timeObj: {},
      pieDataCharts: [],
      running: null,
      ProduceByMacSN: null,
      ArchivesCncDevice: {},
      ArchiveServoMotor: [],
      msgEdit: false,
      netTypeArray: ['4G', '窄带', '有线网', '无线网'],
      array: [
        '机械手刀库',
        '链式刀库',
        '斗笠式刀库',
        '夹臂式刀库',
        '电动刀架',
        '液压刀架',
        '排式刀架',
        '伺服刀架（车）',
      ],
      equipmentTypelist: equipmentTypelist,
      equipmentType: equipmentType,
      picturelist: list,
      systemTypes: systemTypes,
      macName: [],
      macNameIndex: 0,
      editCncDeviceedit: false,
      ServoMotoredit: false,
      imgurl: '',
      defultimg: require('@images/defaultImg.png'),
      onerrorimg: 'this.src="' + require('@images/defaultImg.png') + '"',
      onerrorpicture: 'this.src="' + require('@images/imgdefult.png') + '"',
      produceNameRank: [],
      previewVisibleopen: false,
      previewimg: '',
      groupid: null,
      spinning: false,
      systemTypeShow: false,
      registedBy: '',
      companyId: '',
      nowDate: '',
      names: '',
      params: {},
      cidData: { resultDesc: '暂无数据', address: '暂无数据' }, // 流量和地址
    };
  },
  created() {
    this.groupid = this.$route.query.groupid;
    this.imgurl = this.$pictureUrl;
    this.timeParams.macSN = this.macSN = this.$route.query.macsn;
    this.timeParams.day = timeCalculation(new Date(), 'subtract', 0);
    this.selectArchives();
    this.selArchiveAndGuide();
    this.getStateTimeSum();
    // this.getProduceByMacSN();
    // this.DefMonthProduceDay();
    this.getArchivesCncDevice();
    this.getArchiveServoMotor();
    this.SelMacAlarm();
    this.registedBy = localStorage.getItem('userName');
    this.companyId = localStorage.getItem('compid');
    this.userid = localStorage.getItem('userId');
  },
  mounted() {
    let { username, compid, name, userId } = JSON.parse(localStorage.getItem('userInfo'));

    this.registedBy = username;
    this.companyId = compid;
    this.userid = userId;
    this.names = name;
  },
  computed: {
    ...mapState(['authBtnlists']),
    registerTime: function() {
      switch (parseInt(this.form.type)) {
        case 1:
          return `${Moment()
            .add(1, 'days')
            .format('YYYY-MM-DD')}`;
        case 2:
          return `${Moment()
            .add(7, 'days')
            .format('YYYY-MM-DD')}`;
        case 3:
          return `${Moment()
            .add(1, 'months')
            .format('YYYY-MM-DD')}`;
        case 4:
          return `${Moment()
            .add(1, 'years')
            .format('YYYY-MM-DD')}`;
        default:
          break;
      }
    },
  },
  methods: {
    hasAuth(str) {
      // console.log(this.authBtnlists);
      console.log('输出', !this.authBtnlists.includes(str));
      return !this.authBtnlists.includes(str);
      // return true
    },
    //注册续期按钮点击打开表单
    async registration(modal1Visible) {
      // console.log(this.registedBy);
      const res = await API.getUserResource({ username: this.registedBy });
      // console.log("权限",res);
      var typeArr = [];
      function getType(data, arr) {
        data.forEach((item) => {
          typeArr.push(item.type);
          if (item.children.length > 0) {
            getType(item.children, arr);
          }
        });
      }
      // console.log("递归",typeArr);
      getType(res.Data[0].children, typeArr);
      let that = this;
      console.log('判断', typeArr.includes(4));
      if (typeArr.includes(4) == false) {
        that.$message.info('权限过期');
      } else {
        console.log(modal1Visible);
        this.modal1Visible = modal1Visible;
        this.timeParams.day = '0-0-0';
      }
      let params = {
        // dieDate: this.timeParams.day,
        psnCode: this.macSN,
        dieForeverFlag: this.form.forever,
        level: 2,
        id: this.companyId,
        companyId: this.companyId,
        registedBy: this.registedBy,

        register: this.names,
      };

      this.params = params;
    },
    //关闭获取注册码表单
    closeRegistration(modal1Visible) {
      this.modal1Visible = modal1Visible;
      this.form.forever = 0;
      this.form.type = undefined;
      this.RegistCode = '';
    },
    //日期选择不能选今天及之前的
    disabledDate(current) {
      return current && current < this.$Moment().endOf('day');
    },
    getSystemType(type) {
      console.log('type');
      console.log(type);
      this.ArchivesCncDevice.systemType = type;
      this.systemTypeShow = false;
    },
    openSystemType() {
      this.systemTypeShow = true;
    },
    CloseSystemType() {
      this.systemTypeShow = false;
    },
    gotoyieldDetails() {
      this.$router.push({ path: '/deviceInfo/yieldDetails', query: { macsn: this.macSN, groupid: this.groupid } });
    },
    openimg(img) {
      if (img) {
        this.previewimg = this.imgurl + img;
        this.previewVisibleopen = true;
      }
    },
    slnotimg(event) {
      var img = event.srcElement;
      img.src = this.defultimg;
      img.onerror = null; //解绑onerror事件
    },
    SelMacAlarm() {
      let params = {
        page: 1,
        macsn: this.macSN,
        select: '1,2,3,4',
      };
      api.SelMacAlarm(params).then((res) => {
        this.ararmData = res.Data;
      });
    },
    //修改单个机床的伺服与电机信息
    updateArchiveServoMotor() {
      let arr = this.ArchiveServoMotor.filter((item) => {
        return item.axisType === '';
      });
      if (arr.length > 0) {
        this.$message.error('请填写轴名称');
      } else {
        let params = {
          macSN: this.macSN,
          updateServoMotorList: this.ArchiveServoMotor,
        };
        api.updateArchiveServoMotor(params).then((res) => {
          if (res.MsgCode == 0) {
            this.$message.info(res.MsgDesc);
            this.getArchiveServoMotor();
            this.ServoMotoredit = false;
          } else {
            this.$message.error(res.MsgDesc);
          }
        });
      }
    },
    deteleServoMotor(index) {
      this.ArchiveServoMotor.splice(index, 1);
    },
    editServoMotor() {
      this.ServoMotoredit = true;
    },
    addServoMotor() {
      this.ArchiveServoMotor.push({ axisType: '', macSN: this.macSN });
    },
    //修改系统信息
    updateArchivesCncDevice() {
      this.ArchivesCncDevice.macSn = this.timeParams.macSN;
      api.updateArchivesCncDevice(this.ArchivesCncDevice).then((res) => {
        if (res.MsgCode == 0) {
          this.$message.info(res.MsgDesc);
          this.getArchivesCncDevice();
          this.editCncDeviceedit = false;
        } else {
          this.$message.error(res.MsgDesc);
        }
      });
    },
    editCncDevice() {
      this.editCncDeviceedit = true;
    },
    //修改信息
    updateArchiveAndGuide() {
      let picture = {};
      this.picturelist.forEach((item) => {
        if (item.fileObj && item.fileObj.length > 0) {
          picture[item.value] = item.fileObj[0].id + '';
        }
      });
      if (!this.dataGuide.macType || this.dataGuide.macType == '') {
        this.$message.error('请输入设备型号');
        return;
      }
      if (!this.dataGuide.toolChargeType || this.dataGuide.toolChargeType == '') {
        this.$message.error('请选择刀库类型');
        return;
      }
      if (!this.macName || this.macName.length < 2) {
        this.$message.error('请选择设备类型');
        return;
      }
      let flag = true;
      let toolGuide = [];
      if (!this.dataGuide.toolGuide || this.dataGuide.toolGuide.length <= 0) {
        this.$message.error('请添加导轨类型');
        return;
      } else {
        this.dataGuide.toolGuide.forEach((item) => {
          let data = {
            axis: '',
            type: '',
          };
          if (!item.guideAxis || item.guideAxis == '') {
            this.$message.error('请输入导轨类型信息');
            flag = false;
            return;
          } else {
            data.axis = item.guideAxis;
            data.type = item.guideType;
            toolGuide.push(data);
          }
        });
      }
      if (!flag) {
        return;
      }

      let params = {
        macSn: this.timeParams.macSN,
        macType: this.dataGuide.macType,
        iccid: this.dataGuide.iccid,
        cid: this.dataGuide.cid,
        macNumb: this.dataGuide.macNumb,
        toolChargeType: this.dataGuide.toolChargeType,
        macName: this.macName[0] + '&' + this.macName[1],
        guideInfo: JSON.stringify(toolGuide),
        pictureId: JSON.stringify(picture),
        netWorkingMode: this.dataGuide.netWorkingMode,
        macNorm: this.dataGuide.macNorm,
        macImei: this.dataGuide.macImei,
        location: this.dataGuide.location,
      };

      api.updateArchiveAndGuide(params).then((res) => {
        if (res.MsgCode == 0) {
          this.$message.info(res.MsgDesc);
          this.selArchiveAndGuide();
          this.msgEdit = false;
          this.selectArchives();
        } else {
          this.$message.error(res.MsgDesc);
        }
      });
    },

    //导轨类型
    addtoolGuide() {
      this.dataGuide.toolGuide.push({ guideAxis: '', guideType: '线轨' });
    },
    deteletoolGuide(index) {
      this.dataGuide.toolGuide.splice(index, 1);
    },
    //设备类型
    handleChangemacNameone(item) {
      this.macNameIndex = this.equipmentTypelist.findIndex((li) => li == item);
      this.macName.splice(0, 1, this.equipmentTypelist[this.macNameIndex]);
      this.macName.splice(1, 1, this.equipmentType[this.macNameIndex][0]);
      this.$forceUpdate();
    },
    handleChangemacNametwo(item) {
      this.macName.splice(1, 1, item);
      this.$forceUpdate();
    },
    //倒库
    handletoolChange() {},
    editMSG() {
      this.msgEdit = true;
      this.$forceUpdate();
    },
    //基本信息
    selectArchives() {
      api.selectArchives({ macSN: this.macSN }).then((res) => {
        this.dataInfo = res.Data;
        this.dataInfo.color = this.runStateOptioncolor(res.Data.runstate);
      });
    },
    //机床信息
    selArchiveAndGuide() {
      api.selArchiveAndGuide({ macSn: this.macSN }).then((res) => {
        this.dataGuide = res.Data;
        // this.getTerminalUsage();
        let picture = res.Data.picture;
        this.picturelist.forEach((element) => {
          let item = picture.find((item) => item.description == element.value);

          if (item) {
            element.img = item.pictureUrl;
            element.id = item.id;
            element.fileObj = [{ id: '' }];
            element.fileObj[0].id = item.id;
          } else {
            element.img = '';
          }
        });
        console.log(this.picturelist, 222);
        if (this.dataGuide.macName) {
          this.macName = this.dataGuide.macName.split('&');
        }
      });
    },
    // /查询单个机床的伺服与电机信息
    getArchiveServoMotor() {
      api.getArchiveServoMotor({ macSn: this.macSN }).then((res) => {
        if (res.Data) {
          this.ArchiveServoMotor = res.Data;
        } else {
          this.ArchiveServoMotor = [];
        }
      });
    },
    //运行时间
    getStateTimeSum() {
      this.spinning = true;
      api.getStateTimeSum(this.timeParams).then((res) => {
        this.spinning = false;
        this.timeObj = res.data;
        this.pieData = [
          { value: this.timeObj ? this.timeObj.startUp : 0, name: '开机' },
          { value: this.timeObj ? this.timeObj.running : 0, name: '运行' },
          { value: this.timeObj ? this.timeObj.stop : 0, name: '待机' },
          { value: this.timeObj ? this.timeObj.alarm : 0, name: '报警' },
          { value: this.timeObj ? this.timeObj.offline : 0, name: '离线' },
        ];
        this.running = this.timeObj ? (this.timeObj.running ? this.timeObj.running : 0) : 0;
        this.pieDataCharts = res.data ? res.data.stateTimes : [];
        if (res.data && res.data.produceNameRank) {
          this.produceNameRank = res.data.produceNameRank;
        } else {
          this.produceNameRank = [];
        }
      });
    },
    // 获取流量
    async getTerminalUsage() {
      let that = this;
      let params = { id: that.dataGuide.iccid };
      const res = await api.getTerminalUsageByICCID(params);
      if (res.code === 0 && res.data.status === '0000' && res.data.data.resultCode === '0000') {
        that.cidData.resultDesc = res.data.data.resultDesc;
      }
    },
    // 获取地址
    // async getStationCell() {
    //   let params = {
    //     mcc: '460',
    //     mnc: '1',
    //     lac: this.dataGuide.lac,
    //     ci: this.dataGuide.cid,
    //     coord: 'wgs84',
    //     output: 'json',
    //   };
    //   const res = await api.stationCell(params);
    //   if (res.address && res.errcode === 0) {
    //     this.cidData.address = res.address;
    //   }
    // },
    //查询单个机床的数控系统信息
    async getArchivesCncDevice() {
      const res = await api.getArchivesCncDevice({ macSn: this.macSN });
      if (res.Data) {
        this.ArchivesCncDevice = res.Data;
      } else {
        this.ArchivesCncDevice = {};
      }
    },
    //选择注册天数
    // DaysChange() {
    //   if (this.form.type == 1) {
    //     this.timeParams.day = `${this.$Moment()
    //       .add(1, 'days')
    //       .format('YYYY-MM-DD')}`;
    //   } else if (this.form.type == 2) {
    //     this.timeParams.day = `${this.$Moment()
    //       .add(7, 'days')
    //       .format('YYYY-MM-DD')}`;
    //   } else if (this.form.type == 3) {
    //     this.timeParams.day = `${this.$Moment()
    //       .add(1, 'months')
    //       .format('YYYY-MM-DD')}`;
    //   } else if (this.form.type == 4) {
    //     this.timeParams.day = `${this.$Moment()
    //       .add(1, 'years')
    //       .format('YYYY-MM-DD')}`;
    //   } else {
    //     this.timeParams.day = '0-0-0';
    //   }
    //   this.RegistCode = '';
    // },
    //修改注册状态是否永久
    // foreverChange() {
    //   this.RegistCode = '';
    //   this.timeParams.day = `${this.$Moment()
    //     .add(100, 'years')
    //     .format('YYYY-MM-DD')}`;
    // },
    // onChange(e) {
    //   this.clrFlag = e.target.value;
    // },
    //获取注册码
    // getRegistCode() {
    //   let params = {
    //     dieDate: this.timeParams.day,
    //     psnCode: this.macSN,
    //     dieForeverFlag: this.form.forever,
    //     level: 2,
    //     id: this.companyId,
    //     clrFlag: this.clrFlag,
    //     companyId: this.companyId,
    //     registedBy: this.registedBy,
    //     endUseDate: this.timeParams.day,
    //     register: this.names,
    //     registDate: `${this.$Moment().format('YYYY-MM-DD hh:mm:ss')}`,
    //   };
    //   // this.params = params
    //   if (this.timeParams.day != '0-0-0' || this.form.forever == 1) {
    //     api.getRegistCode(params).then((res) => {
    //       if (res.MsgCode == 0) {
    //         this.$message.success(res.MsgDesc);
    //       } else {
    //         this.$message.error(res.MsgDesc);
    //       }
    //       this.RegistCode = res.Data;
    //     });
    //   } else {
    //     this.$message.error('请选择时间');
    //   }
    // },
    //某天加工件数
    // getProduceByMacSN() {
    //   let params = {
    //     pageSize: 10,
    //     pageNum: 1,
    //     day: this.timeParams,
    //     macSN: this.macSN,
    //   };
    //   this.timeParams.pageSize = 10;
    //   this.timeParams.pageNum = 1;
    //   api.getProduceByMacSN(params).then((res) => {
    //     this.ProduceByMacSN = res.data.rows;
    //   });
    // },
    //查询时间段内机床加工件类型数量
    // DefMonthProduceDay() {
    //   let params = {
    //     startTime: this.timeParams.day,
    //     endTime: timeCalculation(this.timeParams.day, "add", 1),
    //     MacSN: this.macSN,
    //   };
    //   this.timeParams.pageSize = 10;
    //   this.timeParams.pageNum = 1;
    //   api.DefMonthProduceDay(params).then((res) => {
    //     this.ProduceByMacSN = res.Data;
    //   });
    // },
    datechange(data, datastring) {
      console.log('时间', datastring.split('-'));
      this.times.year = datastring.split('-')[0];
      this.times.month = datastring.split('-')[1];
      this.times.day = datastring.split('-')[2];
      this.timeParams.day = datastring;
      // this.getProduceByMacSN();
      this.getStateTimeSum();
      // this.DefMonthProduceDay();

      //生成注册码时修改时间，之前生成的码失效
      this.RegistCode = '';
    },
    runStateOptioncolor(val) {
      let opt = runStateOption.find((item) => item.value == val);
      return opt ? opt.color : '';
    },
    getData(val) {
      console.log(val);
      this.modal1Visible = val;
    },
  },
};
</script>

<style scoped lang="less">
@import 'index.less';
</style>
